<template>
  <div class="min">
    <div class="title">
      <span style="margin-right: 460px;">{{companyName}} {{languageData.admin.orderstatistics}} </span>

      <el-date-picker
        v-model="fromData.moth"
        type="month"
        placeholder="选择日期"
        >
      </el-date-picker>
      <el-button type="primary" @click="sech()">{{languageData.admin.search}}</el-button></div>
      <div class="sech">

      </div>
      <div>
        <div class="left card all" >
               <p class="cardTitlle"> {{languageData.admin.accumulate}}

               </p>
               <p class="cardcon" v-show="languageData.id=='Chinese'"> 共 <span style="color: #E6A23C "> {{allOrderNum}} </span> 次</p>
              <p class="cardcon" v-show="languageData.id!='Chinese'">  <span style="color: #E6A23C "> {{allOrderNum}} </span> Trackers</p>
        </div>
        <div class="left card mot">
          <p class="cardTitlle">{{fromData.text}} {{languageData.admin.oder}}</p>
          <p class="cardcon" v-show="languageData.id=='Chinese'"> 共 <span style="color:#67C23A"> {{OrderNumByMonth}} </span> 次</p>
          <p class="cardcon" v-show="languageData.id!='Chinese'">  <span style="color:#67C23A"> {{OrderNumByMonth}} </span> Trackers</p>
        </div>
      </div>
  </div>
</template>
<style scoped>
  .title{text-align:left;line-height: 60px;border-bottom: 1px solid #e1e1e1;margin-bottom: 20px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);padding-left: 20px;}
  .card{width: 400px;cursor: pointer; height: 250px;background: #fff;border-radius: 4px;margin: 20px 20px ;box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);position: relative;overflow: hidden; }
  .mot{background: linear-gradient(to top right,#fff, #f1f9de);}
  .all{background: linear-gradient(to top right,#fff, #faf0da);}
  .cardTitlle{line-height: 60px;font-size: 16px;font-weight: bold}
  .sech{ width: 100%;text-align: left;padding: 0px 20px}
  .cardcon{line-height: 150px}
</style>
<script>
  import UserImg from '../../../static/img/icon/userDeFilt.png'
  import Public from '../../vuex/public'
  import {mapState, mapActions} from 'vuex'

  export default {
    name: 'my-addUserFrom',
    data () {
      // 自定义密码校验
      var indeofPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        labelPosition: 'left',
        user: {
          imgUlr: UserImg, // 账号图片
          name: '小明管理员'
        },
        fromData: {
          moth: '2018', // 商家名
          text: '此月'
        },
        companyId:'',
        companyName:''
      }
    },
    methods: {
      ...mapActions({
        addUser: 'addUser',
        getUserList: 'getUserList',
        stsAllOrderNum: 'stsAllOrderNum',
        stsOrderNumByMonth:'stsOrderNumByMonth'
      }),
      sech(){
        var time = Public.publicLo.dataChange(this.fromData.moth)
        var parm = {date:time.time}
        if(this.companyId){
          parm.companyId = this.companyId
        }
        this.fromData.text = parseInt(time.y)+'-'+parseInt(time.m)
        this.stsOrderNumByMonth(parm)
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var parm = {
              companyId: this.fromData.companyId, // 商家名
              account: this.fromData.account, // 账号
              password: this.fromData.password // 密码
            }
            this.addUser(parm)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },

      listStatus (res) {
        this.loading = false
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
        this.fromData = {
          companyId: null, // 商家名
          account: null, // 账号
          password: null // 密码
        }
        if (res.status == 0) {
          // 修改成功
          var text =  this.languageData.id=='Chinese'? '创建账号成功': 'Create account successfully'
          this.openSuccess(text)
        }
        if (res.status != 0) {
          // 修改成功 修改失败
          var text = ''
          if(res.status == 6){
            text = this.languageData.id=='Chinese'? '该账号已存在': 'Account already exists'
          }else {
          text =  this.languageData.id=='Chinese'? '创建账号失败': 'Create account failed'
          }
          this.openError(text)
        }
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      }
    },
    computed: {
      UserListData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      allOrderNum: function () {
        var parm = this.stateAllOrderNum
        if(parm){
          parm = parm.body.data.total
        }
        return parm
      },
      OrderNumByMonth: function () {
        var parm = this.stateOrderNumByMonth
        if(parm){
          parm = parm.body.data.total
        }
        return parm
      },
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      ...mapState([
        'updateStatus',
        'language',
        'UserList',
        'stateAllOrderNum',
        'stateOrderNumByMonth'
      ])
    },
    mounted () {
      this.companyId = parseInt(this.$route.query.id)
      this.companyName =this.$route.query.name || ''
      // 查询所有订单
      var parm1={}
      if(this.companyId){
        parm1.companyId = this.companyId

      }
      this.stsAllOrderNum(parm1)
      // 获取当前时间
      var time = new Date()
      // 界面显示当前月份
      this.fromData.moth = time
      time = Public.publicLo.dataChange(time)
      // 查询当前月
      var parm = {date:time.time}
      // 判断是否admin查询
      if(this.companyId){
        parm.companyId = this.companyId
      }
      this.fromData.text = parseInt(time.y)+'- '+parseInt(time.m)
      this.stsOrderNumByMonth(parm)
    },
    components: {
    }
  }
</script>

